<template>
  <div class="register-container">
    <h1>注册</h1>
    <div class="form-columns">
      <div class="form-column">
        <select v-model="selectedUserType">
          <option value="" disabled selected>选择用户身份</option>
          <option value="3">普通用户</option>
          <option value="1">村民</option>
          <option value="2">政府人员</option>
        </select>
        <input v-model="user_account" type="text" placeholder="请输入账号">
        <input v-model="username" type="text" placeholder="请输入用户名">
        <select v-model="gender">
          <option value="" disabled selected>选择性别</option>
          <option value="男">男</option>
          <option value="女">女</option>
        </select>
      </div>
      <div class="form-column">
        <select v-model="selectedVillage">
          <option value="" disabled selected>选择村庄</option>
          <option value="1">无（非村民身份）</option>
          <option value="2">小岗村</option>
          <option value="3">华西村</option>
        </select>
        <input v-model="password" type="password" placeholder="请输入密码">
        <input v-model="phoneNumber" type="text" placeholder="请输入手机号码">
        <input id="birthDate" v-model="birthDate" type="date" placeholder="选择出生日期">请选择出生日期
      </div>
    </div>
    <button class="register-button" @click="register">注册</button>
    <div class="login-link">
      已经有账号? <router-link to="/">点此登录</router-link>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { useRouter } from 'vue-router';
import axios from 'axios';

const router = useRouter();
const selectedUserType = ref('');
const username = ref('');
const password = ref('');
const phoneNumber = ref('');
const gender = ref('');
const birthDate = ref('');
const user_account = ref('');
// 新增 ref 来存储用户选择的村庄
const selectedVillage = ref('');

const register = async () => {
  if (!selectedUserType.value) {
    alert('请选择用户身份');
    return;
  }
  if (!username.value) {
    alert('请输入用户名');
    return;
  }
  if (!password.value) {
    alert('请输入密码');
    return;
  }
  if (!phoneNumber.value) {
    alert('请输入手机号码');
    return;
  }
  if (!gender.value) {
    alert('请选择性别');
    return;
  }
  if (!birthDate.value) {
    alert('请选择出生日期');
    return;
  }
  if (!user_account.value) {
    alert('请输入账号');
    return;
  }
  if (!selectedVillage.value) {
    alert('请选择村庄');
    return;
  }
  try {
    const data = {
      selectedUserType: selectedUserType.value,
      username: username.value,
      password: password.value,
      phoneNumber: phoneNumber.value,
      gender: gender.value,
      birthDate: birthDate.value,
      user_account: user_account.value,
      selectedVillage: selectedVillage.value
    };
    const response = await axios.post('http://localhost:3000/api/user/register', data);
    if (response.data.message === '注册成功') {
      alert(`注册成功，您的账号是：${response.data.user_account},请登录`);
      router.push('/');
    } else {
      alert(response.data.message);
    }
  } catch (error) {
    console.error('注册出错:', error);
    alert('注册失败，账号已存在，请重新输入');
  }
};
</script>

<style scoped>
.register-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 100px;
}

.form-columns {
  display: flex;
  gap: 20px; 
}

.form-column {
  display: flex;
  flex-direction: column;
}

select {
  margin: 10px 0;
  padding: 10px;
  width: 220px;
}

input {
  margin: 10px 0;
  padding: 10px;
  width: 200px;
}

label {
  margin-top: 10px;
}

.login-link {
  margin-top: 10px;
  text-align: right;
}

.register-button {
  margin-top: 20px;
  padding: 10px 20px;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}
</style>